// 订阅弹窗
import React, { useState, useImperativeHandle, forwardRef } from "react";
import PropTypes from "prop-types";
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftButton from "components/SoftButton";
import SoftAvatar from "components/SoftAvatar";
import SoftSelect from "components/SoftSelect";
import Separator from "layouts/authentication/components/Separator";
import CustomModal from "components/CustomModal";
import Divider from "@mui/material/Divider";
import freeIcon from "assets/icon/freeIcon.png";
import premiumIcon from "assets/icon/premiumIcon.png";
import { Formik, Form } from "formik";
import FormField from "layouts/pages/users/new-user/components/FormField";
import Swal from "sweetalert2";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import { message } from "antd";
// request
import { subscribe } from "request/api";
const SelectPlanModal = forwardRef(({ color, children }, ref) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [infoModal, setInfoModal] = useState(false);
  const [planType, setPlanType] = useState(0);
  const [step, setStep] = useState(1);

  // 暴露给外部的打开弹窗方法
  useImperativeHandle(ref, () => ({
    openModal() {
      setIsModalOpen(true);
    },
    closeModal() {
      handleCancel();
    },
  }));

  // 取消
  const handleCancel = () => {
    setIsModalOpen(false);
    setStep(1);
    setPlanType(0);
  };

  //点击注册按钮
  const handleSubmit = async (values, { setSubmitting }) => {
    if (planType === 1) {
      // 免费
      let res = await subscribe({ email: values.email });
      if (res.code !== 200) {
        message.error(res.msg);
        return;
      }
      Swal.fire(
        "Congrats! ",
        `Your Plan has been activated.<br>Your account is: ${res.data.email}`,
        "success"
      );
      handleCancel();
    } else if (planType === 2) {
      // 付费
      setStep(2);
    }
    setSubmitting(false);
  };

  return (
    <>
      <CustomModal
        title={
          step === 1
            ? planType === 0
              ? "Subscribe Now"
              : planType === 1
              ? "Free Plan"
              : "Premium Plan"
            : step === 2
            ? "Order Info"
            : "Order Placed"
        }
        open={isModalOpen}
        onCancel={handleCancel}
      >
        {step === 1 &&
          (planType === 0 ? (
            <SoftBox>
              <SoftBox mb={3} mt={4}>
                <SoftBox display="flex" justifyContent="center">
                  <SoftButton
                    variant="outlined"
                    color="light"
                    sx={{ display: "flex", flexDirection: "column", py: 2, width: "114px" }}
                    onClick={() => setPlanType(1)}
                  >
                    <SoftAvatar
                      src={freeIcon}
                      alt="Avatar"
                      sx={{ width: "40px", height: "40px" }}
                    />

                    <SoftTypography
                      display="block"
                      variant="body2"
                      color="secondary"
                      fontSize="16px"
                      mt={1}
                      lineHeight={1}
                    >
                      Free
                    </SoftTypography>
                  </SoftButton>
                  <SoftBox mx={1}></SoftBox>
                  <SoftButton
                    variant="outlined"
                    color="light"
                    sx={{ display: "flex", flexDirection: "column", py: 2, width: "114px" }}
                    onClick={() => setPlanType(2)}
                  >
                    <SoftAvatar
                      src={premiumIcon}
                      alt="Avatar"
                      sx={{ width: "40px", height: "40px" }}
                    />

                    <SoftTypography
                      display="block"
                      variant="body2"
                      color="secondary"
                      fontSize="16px"
                      mt={1}
                      lineHeight={1}
                    >
                      Premium
                    </SoftTypography>
                  </SoftButton>
                </SoftBox>
              </SoftBox>
              <Separator />
              <SoftBox mt={1} mb={2}>
                <SoftButton onClick={handleCancel} variant="gradient" color="dark" fullWidth>
                  SIGN IN
                </SoftButton>
              </SoftBox>
              <SoftBox mt={1} mb={2} textAlign="center">
                <SoftTypography display="block" variant="body2" color="secondary" fontSize="12px">
                  If you are already a subscriber to Tradingsignal.ai. Please click the button to
                  sign in
                </SoftTypography>
              </SoftBox>
            </SoftBox>
          ) : (
            <SoftBox>
              <SoftBox mt={4}>
                <Formik
                  initialValues={{ email: "" }}
                  validate={(values) => {
                    const errors = {};
                    if (!values.email) {
                      errors.email = "Required";
                    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
                      errors.email = "Invalid email address";
                    }
                    return errors;
                  }}
                  onSubmit={handleSubmit}
                >
                  {({ values, errors, touched, isSubmitting }) => (
                    <Form autoComplete="off">
                      <SoftBox>
                        <FormField
                          type="email"
                          label="E-Mail"
                          name="email"
                          value={values.email}
                          placeholder="Enter your email"
                          error={errors.email && touched.email}
                        />
                      </SoftBox>
                      <SoftBox mt={1} mb={2}>
                        <SoftTypography
                          mb="40px"
                          display="block"
                          variant="body2"
                          color="secondary"
                          fontSize="12px"
                        >
                          Please enter your e-mail to sign up for Tradingsignal.ai.
                        </SoftTypography>
                        <SoftButton
                          disabled={isSubmitting}
                          type="submit"
                          variant="gradient"
                          color="dark"
                          fullWidth
                        >
                          SIGN UP
                        </SoftButton>
                      </SoftBox>
                    </Form>
                  )}
                </Formik>
              </SoftBox>
            </SoftBox>
          ))}
        {step === 2 && (
          <SoftBox>
            <SoftBox px={2} mt={4}>
              <SoftBox mb={2} display="flex" justifyContent="space-between">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Plan
                </SoftTypography>
                <SoftTypography variant="body2" color="text" fontSize="14px">
                  Premium
                </SoftTypography>
              </SoftBox>
              <SoftBox mb={2} display="flex" justifyContent="space-between">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Unit Price
                </SoftTypography>
                <SoftTypography variant="body2" color="text" fontSize="14px">
                  1200 USDT
                </SoftTypography>
              </SoftBox>
              <SoftBox display="flex" justifyContent="space-between">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Quantity
                </SoftTypography>
                <SoftTypography variant="body2" color="text" fontSize="14px">
                  1
                </SoftTypography>
              </SoftBox>
              <SoftBox my={2} width="100%">
                <Divider />
              </SoftBox>
              <SoftBox display="flex" justifyContent="space-between">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Total
                </SoftTypography>
                <SoftTypography
                  variant="body2"
                  color="dark"
                  fontSize="14px"
                  sx={{ fontWeight: "500" }}
                >
                  1200 USDT
                </SoftTypography>
              </SoftBox>
            </SoftBox>
            <SoftBox mt="40px">
              <SoftButton variant="gradient" color="dark" fullWidth onClick={() => setStep(3)}>
                SIGN UP
              </SoftButton>
            </SoftBox>
          </SoftBox>
        )}
        {step === 3 && (
          <SoftBox>
            <SoftBox px={2} mt={4}>
              <SoftBox mb={2} display="flex" justifyContent="space-between">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Payment Method
                </SoftTypography>
                <SoftTypography variant="body2" color="text" fontSize="14px">
                  Wallet Transfer
                </SoftTypography>
              </SoftBox>
              <SoftBox mb={2} display="flex" justifyContent="space-between">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Total Price
                </SoftTypography>
                <SoftTypography
                  variant="body2"
                  color="dark"
                  fontSize="14px"
                  sx={{ fontWeight: "500" }}
                >
                  1200 USDT
                </SoftTypography>
              </SoftBox>
              <SoftBox display="flex" justifyContent="space-between" alignItems="center">
                <SoftTypography variant="body2" color="secondary" fontSize="14px">
                  Network
                </SoftTypography>
                <SoftBox width="160px">
                  <SoftSelect
                    size="small"
                    options={[
                      { value: "1", label: "Tron (TRC20)" },
                      { value: "2", label: "Solana (SOL)" },
                    ]}
                    defaultValue={{ value: "1", label: "Tron (TRC20)" }}
                  />
                </SoftBox>
              </SoftBox>
              <SoftBox my={2} width="100%">
                <Divider />
              </SoftBox>
            </SoftBox>
            <SoftBox display="flex" alignItems="center" flexDirection="column">
              <SoftTypography
                mb={3}
                display="block"
                variant="body2"
                color="secondary"
                fontSize="12px"
                textAlign="center"
              >
                Send USDT to our deposit address by scanning this QR code or copying this address.
              </SoftTypography>
              <SoftBox
                mb={3}
                display="flex"
                justifyContent="center"
                width="160px"
                height="160px"
                border="1px solid #E0E0E0"
                borderRadius="5px"
              ></SoftBox>
              <SoftBox mb={2} display="flex" flexWrap="wrap">
                <SoftTypography
                  variant="body2"
                  color="secondary"
                  fontSize="14px"
                  sx={{ width: "100%" }}
                >
                  USDT Deposit Address:
                </SoftTypography>
                <SoftTypography
                  variant="body2"
                  color="dark"
                  fontSize="14px"
                  sx={{ fontWeight: "500", display: "flex", alignItems: "center", lineHeight: "1" }}
                >
                  0xB3689bB22bD1ed9c744D04FC80d94376382CB5C8
                  <ContentCopyIcon sx={{ marginLeft: "8px", cursor: "pointer" }}></ContentCopyIcon>
                </SoftTypography>
              </SoftBox>
              <SoftBox bgColor="grey-100" borderRadius="lg" width="100%" p={2}>
                <SoftTypography
                  variant="body2"
                  color="secondary"
                  fontSize="12px"
                  sx={{ width: "100%" }}
                >
                  Disclaimer
                  <br /> *Please make sure that the selected network is the same as your withdrawal
                  platform.
                  <br /> *Please don&apos;t deposit any other digital assets except USDT to the
                  above address. Otherwise, you may lose your assets permanently.
                  <br /> *Depositing into the above address requires 1 confirmation of the network.
                </SoftTypography>
              </SoftBox>
            </SoftBox>
            <SoftBox mt="40px" mb={1}>
              <SoftButton variant="gradient" color="dark" fullWidth>
                COMPLETE
              </SoftButton>
            </SoftBox>
          </SoftBox>
        )}
      </CustomModal>
    </>
  );
});

SelectPlanModal.propTypes = {
  children: PropTypes.string,
  color: PropTypes.string,
};

export default SelectPlanModal;
